<template>
  <div>
    头条首页
    <my-test>
      <!-- scope 代表该插槽传递的所有数据 -->
      <!-- <div slot="main" slot-scope="scope"> -->
      <!-- <template v-slot:main="scope"> -->
      <template #main="scope">
        {{ scope.age }}
        <ul>
          <li
            v-for="(item, index) in scope.arr"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
      </template>
    </my-test>
    <!-- <el-button @click="count++">count累加</el-button> {{ count }} -->
    <el-button @click="user.name='李四'">改变name</el-button> {{ user.name }}
  </div>
</template>

<script>
import MyTest from '@/components/my-test.vue'

export default {
  name: 'home',
  components: {
    MyTest
  },
  data () {
    return {
      count: 0,
      user: {
        name: '战三',
        age: '19'
      }
    }
  },
  watch: {
    // 情况一
    // count () {
    //   console.log('count 改变了')
    // }
    // 情况二：
    // 'user.name': () => {
    //   console.log('name改变了')
    // }

    // 情况三：不行 需要用深度侦听器
    // user () {
    //   console.log('name改变了');
    // }
    // 深度侦听器
    // user: {
    //   handler () {
    //     console.log('name改变了')
    //   },
    //   deep: true
    // }

    // 初始化执行
    user: {
      handler () {
        console.log('name改变了')
      },
      immediate: true
    }
  }
}
</script>

<style>

</style>
